<template>
	<view>
		<!--  ndicator-dots   是否展示 面板指示点  默认示false， 直接写属性名 就表示打开的意思
			  indicator-color 轮播图 下面的小点的颜色,没有被选中的颜色 
			  indicator-active-color  轮播图 下面的小点的颜色。选中后的颜色 
			  autoplay  是否自动切换， 默认是false ，直接写属性名 就表示打开的意思
			  circular  是否衔接滑动， 播放到末尾时 再从头开始
			  interval  轮播图 自动切换 的 时间间隔
			  -->
		<swiper indicator-dots indicator-color="rgba(0, 255, 0, 0.3)" 
		indicator-active-color="#ff001d" circular autoplay interval="5000" vertical>
		<!-- swiper-item 是里面 每一个轮播图的资源  项目大部份都是接口拿到list数据做展示 -->
			<swiper-item><image src="../../static/pic1.png" mode="aspectFill"></image></swiper-item>
			<swiper-item><image src="../../static/pic2.png" mode="aspectFill"></image></swiper-item>
			<swiper-item><image src="../../static/pic4.jpg" mode="aspectFill"></image></swiper-item>
			<swiper-item><image src="../../static/pic3.webp" mode="aspectFill"></image></swiper-item>
		</swiper>
	</view>
	-----
	<!-- navigator页面跳转标签， url为 路径地址，  需要在pages.json里表明path路径 -->
	<navigator url="/pages/demo2/demo2">跳转到demo2</navigator>
	
	
	<view>
		<!-- model是 图片剪裁 缩放格式 -->
		<!-- class 是绑定下面 style的样式， -->
		<image src="../../static/logo.png" mode="" class="pic1"></image>
		<image src="../../static/pic3.webp" mode="aspectFill" class="pic2"></image>
		<image src="../../static/pic4.jpg" mode="heightFix" class="pic3"></image>
		<!-- 网络上的图片也可以 -->
		<image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png" mode="heightFix"></image>
	</view>
</template>

<script>

</script>

<style lang="scss">
.pic1{
	width: 150px;
	height: 150px;
}
.pic2{
	width: 200px;
	height: 200px;
}
.pic3{
	height: 300px;
}
	
	
swiper{
	width: 100vw;   
	height: 200px;
	border:1px solid green;
	swiper-item{
		width: 100%;
		height: 100%;
		background: pink;
		image{
			width: 100%;
			height: 100%;
		}
	}
	swiper-item:nth-child(2n){
		background: orange;
	}
}
</style>


<!-- nth-child(n)是CSS选择器中的一个伪类，用于选择父级元素下特定位置的子元素。它通过指定一个数值参数n来确定要选择的子元素的位置
nth-child(n)的用法如下：
	1. n可以是一个具体的整数值，例如2表示选择父级元素下的第二个子元素。
	2. n也可以是一个公式，例如2n表示选择父级元素下每隔两个子元素的子元素（即偶数位置的子元素）。这里的n可以是0、1、2、3…以此类推。
	3. 可以使用n + b形式的公式，其中b是一个整数。例如2n + 1表示选择父级元素下从第一个子元素开始的每隔两个子元素的子元素（即奇数位置的子元素）。
	-->
	
	<div>
	  <p>第一个段落</p>     <!-- :nth-child(1) 	:nth-child(2n + 1)  -->
	  <p>第二个段落</p>     <!-- :nth-child(2) 	:nth-child(2n) -->
	  <span>行内元素</span> <!-- :nth-child(3) 	:nth-child(2n + 1)  -->
	  <p>第三个段落</p>     <!-- :nth-child(4) 	:nth-child(2n) -->
	  <p>第四个段落</p>     <!-- :nth-child(5) 	:nth-child(2n + 1)  -->
	</div>
<!--
:nth-child(1)将选择父级元素下的第一个子元素，即第一个段落。
:nth-child(2)将选择父级元素下的第二个子元素，即第二个段落。
:nth-child(3)将选择父级元素下的第三个子元素，即行内元素。
:nth-child(4)将选择父级元素下的第四个子元素，即第三个段落。
:nth-child(5)将选择父级元素下的第五个子元素，即第四个段落。

:nth-child(2n)将选择父级元素下每隔两个子元素的子元素，即第二个、第四个子元素（偶数位置的子元素）。
:nth-child(2n + 1)将选择父级元素下从第一个子元素开始的每隔两个子元素的子元素，即第一个、第三个、第五个子元素（奇数位置的子元素）。

:nth-child(n)允许您根据子元素在父级中的位置选择特定子元素，无论其类型如何。
 -->
